<template>
  <div class="statistic-card">
    <el-statistic :value="props.today">
      <template #title>
        <div class="statistic-title">
          {{ i18n(props.title) }}
          <el-tooltip
            effect="dark"
            :content="i18n(props.description)"
            placement="top">
            <el-icon class="statistic-icon" :size="12">
              <Warning />
            </el-icon>
          </el-tooltip>
        </div>
      </template>
    </el-statistic>
    <div class="statistic-footer">
      <div class="footer-item">
        <span>{{ i18n('member.behavior.than_yesterday') }}</span>
        <span :class="props.yesterday > 0 ? 'red' : 'green'">
          {{ props.yesterday }}%
          <el-icon v-if="props.yesterday > 0">
            <CaretTop />
          </el-icon>
          <el-icon v-else>
            <CaretBottom />
          </el-icon>
        </span>
      </div>
    </div>
  </div>
</template>

<script setup name="numerical-statistics">
  import { useBase } from "@/hooks/base/useBase"

  const { router, query, i18n } = useBase()

  const props = defineProps({
    title: {
      type: String,
      default: "统计数据标题"
    },
    description: {
      type: String,
      default: "统计数据描述"
    },
    today: {
      type: String,
      default: 30
    },
    yesterday: {
      type: String,
      default: 30
    }
  });
</script>

<style scoped lang="scss">
  .el-statistic {
    --el-statistic-content-font-size: 28px;
  }

  .statistic-card {
    height: 100%;
    padding: 20px 20px 20px 60px;
    border-radius: 4px;
    background-color: var(--el-bg-color-overlay);
    .statistic-title {
      display: inline-flex;
      align-items: center;
    }
    .statistic-icon {
      margin-left: 4px
    }
  }

  .statistic-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--el-text-color-regular);
    margin-top: 16px;
  }

  .statistic-footer .footer-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .statistic-footer .footer-item span:last-child {
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
  }

  .green {
    color: var(--el-color-success);
  }
  .red {
    color: var(--el-color-error);
  }
</style>
